import React from 'react';
// import G6Editor from '@antv/g6-editor';
const G6Editor = require('../../../g6-editor/src')

import { Icon, Tooltip } from 'antd';
import Zcon from '@cbd/icon';
import styles from './index.less';

const defaultFun = () => {
  return false;
}

class Toolbar extends React.Component {
  componentDidMount() {
    const { editor } = this.props;
    const createToolbar = this.getCreateToolbar();
    const toolbar = createToolbar(this.toolbarContainer);
    editor.add(toolbar);
  }

  getCreateToolbar() {
    const { createToolbar } = this.props;
    return createToolbar || this.createToolbar;
  }

  createToolbar = (container) => {
    return new G6Editor.Toolbar({
      container,
    });
  }

  render() {
    const { className = '', saveFlow = defaultFun, reBack = defaultFun } = this.props;
    return (
      <div
        className={`toolbar ${styles.toolbar} ${className}`}
        ref={el => { this.toolbarContainer = el; }}
      >
        <span onClick={saveFlow} className='custom'>
          <Tooltip placement="top" title='保存'>
            <Zcon type="save" />
          </Tooltip>
        </span>

        <span className='separator' />

        <span data-command="zoomIn" className='command'>
          <Tooltip placement="top" title='放大'>
            <Icon type="zoom-in" />
          </Tooltip>
        </span>
        <span data-command="zoomOut" className='command'>
          <Tooltip placement="top" title='缩小'>
            <Icon type="zoom-out" />
          </Tooltip>
        </span>
        <span data-command="autoZoom" className='command'>
          <Tooltip placement="top" title='适应画布'>
            <Zcon type="arrows-alt" />
          </Tooltip>
        </span>

        <span className='separator' />

        <span data-command="copy" className='command'>
          <Tooltip placement="top" title='复制'>
            <Zcon type='batch-import' />
          </Tooltip>
        </span>

        <span data-command="delete" className='command'>
          <Tooltip placement="top" title='删除'>
            <Zcon type='delete' />
          </Tooltip>
        </span>

        <span className='separator' />
        <span data-command="undo" className='command'>
          <Tooltip placement="top" title='撤销'>
            <Zcon type='rollback' />
          </Tooltip>
        </span>
        <span data-command="redo" className='command commandredo'>
          <Tooltip placement="top" title='重做'>
            <Zcon type='rollback' />
          </Tooltip>
        </span>

        <span className='separator' />
        <span data-command="selectAll" className='command'>
          <Tooltip placement="top" title='全选'>
            <Zcon type='check-square-o' />
          </Tooltip>
        </span>
        <span data-command="multiSelect" className='command'>
          <Tooltip placement="top" title='多选'>
            <Zcon type='swm-lane' />
          </Tooltip>
        </span>

        <span className='separator' />
        <span data-command="verticalAlign" className='command'>
          <Tooltip placement="top" title='垂直对齐'>
            <Zcon type='bill-b' />
          </Tooltip>
        </span>
        <span data-command="horizontalAlign" className='command'>
          <Tooltip placement="top" title='水平对齐'>
            <Zcon type='order-b' />
          </Tooltip>
        </span>

        <span className='separator' />
        <span data-command="clear" className='command'>
          <Tooltip placement="top" title='清除画布'>
            <Zcon type='renovate' />
          </Tooltip>
        </span>

        <span className='separator' />
        <span onClick={reBack} className='reback'>
          <Tooltip placement="top" title='返回上一级'>
            返回上一级
          </Tooltip>
        </span>
        {/* <div className={styles.btnBox}>
          <Button type="primary">部署</Button>
          <Button type="primary" onClick={saveFlow}>保存</Button>
          <Button type="primary">保存为流程模板</Button>
        </div> */}
      </div>
    );
  }
}

export default Toolbar;
